<template>
  <el-select
    v-model="valueLabel"
    :disabled="disabled"
    :size="size"
    :multiple="multiple"
    :clearable="clearable"
    :placeholder="$t(placeholder)"
    style="width: 100%;"
    @change="handleChange"
  >
    <el-option :label="$t('common.text.all')" value="" v-if="showAll"/>
    <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
  </el-select>
</template>
<script>
/**
 * 年级下拉框组件
 */
export default {
  name: "GradeSelect",
  props: {
    value: {
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    },
    multiple: {
      type: Boolean,
      default: false
    },
    showAll: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: 'message.plzSelect'
    },
  },
  data() {
    return {
      gradeList: [],
      valueLabel: null,
    }
  },
  watch: {
    value(val, oldVal) {
       this.valueLabel = val;
       this.$emit('change', val);
    }
  },
  mounted() {
    this.init();
  },
  created() {
    if (this.multiple && !Array.isArray(this.value)) {
      this.$emit("input", []);
    }
    if (!this.multiple && Array.isArray(this.value)) {
      this.$emit("input", "");
    }
  },
  methods: {
    handleChange(val){
      this.$emit("input", val);
      this.$emit('change', val);
    },
    init(){
      let fullYear = new Date().getFullYear()+5;
      for(; fullYear > 1994; fullYear--) {
        this.gradeList.push({value: fullYear,label: fullYear});
      }
      if(!_.isNil(this.value)){
        this.valueLabel = this.value;
      }
    }
  }
};

</script>

<style scoped>
</style>
